<template>
  <el-drawer v-model="drawerVisible" title="设备详情" class="detail-drawer" size="880px">
    <el-form >
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="终端型号" >
            {{terminalData.terminal?.terminalModel  }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="序列号">
            {{terminalData.terminal?.terminalSerialNumber  }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="硬件参数" style="margin-bottom: 10px;"/>
          <el-descriptions border :column="2" label-width="125px" style="margin-bottom: 18px;">
            <el-descriptions-item label="cpu" width="295">{{terminalData.terminal?.hardwareParams.cpu  }}</el-descriptions-item>
            <el-descriptions-item label="externalStorage">{{terminalData.terminal?.hardwareParams.externalStorage}}</el-descriptions-item>
            <el-descriptions-item label="internalStorage" >{{terminalData.terminal?.hardwareParams.internalStorage}}</el-descriptions-item>
            <el-descriptions-item label="memory">{{terminalData.terminal?.hardwareParams.memory}}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="24">
          <el-form-item label="软件参数" style="margin-bottom: 10px;"/>
          <el-descriptions border :column="2" label-width="125px" style="margin-bottom: 18px;">
            <el-descriptions-item label="firmwareVersion"  width="295">{{terminalData.terminal?.softwareParams.firmwareVersion  }}</el-descriptions-item>
            <el-descriptions-item label="os" >{{terminalData.terminal?.softwareParams.os}}</el-descriptions-item>
          </el-descriptions>
        </el-col>

        <el-col :span="24">
          <el-form-item label="网络配置" style="margin-bottom: 10px;"/>
          <el-table :data="terminalData.terminal?.network" border style="width: 100%">
            <el-table-column prop="ip" label="ip"  />
            <el-table-column prop="mac" label="mac" width="160px" />
            <el-table-column prop="mask" label="mask" />
            <el-table-column prop="interface" label="interface" />
            <el-table-column prop="gateway" label="gateway" />
            <el-table-column prop="dns" label="dns" >
              <template #default="scope">
               <div v-for="item in scope.row.dns" :key="item">
                {{ item }}
               </div>
              </template>
            </el-table-column>
            
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </el-drawer>

</template>

<script setup lang="ts">

const drawerVisible = ref(false)
const terminalData = ref()

const open = async (data:any) => {
  drawerVisible.value = true
  terminalData.value = data

  
  console.log(terminalData.value)
}

defineExpose({ open })

</script>

<style lang="scss">
.detail-drawer {
  .el-drawer__header {
    margin-bottom: 20px;
  }

  .el-drawer__body {
    border-top: 1px solid #e0e0e0;
  }
}
</style>
